<template>
  <el-form :model="data" label-width="auto">
    <el-form-item label="内容">
      <el-input v-model="data.content" />
    </el-form-item>
    <el-form-item label="尺寸">
      <el-select v-model="data.size">
        <el-option
          v-for="item in enumStore.enum.sizeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="类型">
      <el-select v-model="data.type">
        <el-option
          v-for="item in enumStore.enum.typeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="文本按钮">
      <el-select v-model="data.text">
        <el-option
          v-for="item in enumStore.enum.yesOrNot"
          :key="item.value"
          :label="item.label"
          :value="item.value"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="圆角按钮">
      <el-select v-model="data.round">
        <el-option
          v-for="item in enumStore.enum.yesOrNot"
          :key="item.value"
          :label="item.label"
          :value="item.value"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="圆形按钮">
      <el-select v-model="data.circle">
        <el-option
          v-for="item in enumStore.enum.yesOrNot"
          :key="item.value"
          :label="item.label"
          :value="item.value"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="加载状态">
      <el-select v-model="data.loading">
        <el-option
          v-for="item in enumStore.enum.yesOrNot"
          :key="item.value"
          :label="item.label"
          :value="item.value"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="禁用状态">
      <el-select v-model="data.disabled">
        <el-option
          v-for="item in enumStore.enum.yesOrNot"
          :key="item.value"
          :label="item.label"
          :value="item.value"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>
<script setup>
  import { defineModel } from 'vue';
  import { useEnumStore } from '@/store/enum.js';
  import { usePropsData } from '../hooks/use-props';

  const enumStore = useEnumStore();
  const modelData = defineModel();
  const data = usePropsData(modelData);
</script>
<style scoped lang="less"></style>
